<template>
	<div id="app">
		<el-row class="tac">
			<el-col :span="4">
				<h3 style="color: #fff; background-color: rgb(80, 80, 80); text-align: center; padding: 10px;">VEU2_TEST
				</h3>
				<el-menu default-active="0" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
					background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="min-height: 100vh;">
					<div v-for="(item,idx) in navList" :key="idx">
						<el-menu-item :index="idx.toString()" @click="go(item.url)">
							<i class="el-icon-setting"></i>
							<span slot="title">{{item.name}}</span>
						</el-menu-item>
					</div>
				</el-menu>
			</el-col>
			<el-col :span="20" style="padding: 20px;">
				<router-view />
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: 'App',
		data() {
			return {
				navList: [{
						name: '首页',
						url: '/'
					},
					{
						name: '自定义指令',
						url: 'directive'
					},
					{
						name: '异步组件',
						url: 'asyncComponents'
					},
					{
						name: '动态组件',
						url: 'dynamicComponents'
					},
					{
						name: '双向数据绑定原理',
						url: 'defineProperty'
					},
					{
						name: '祖孙组件传值',
						url: 'provideInject'
					},
					{
						name: '兄弟组件传值',
						url: 'bus'
					},
					{
						name: '父子组件生命周期顺序',
						url: 'life'
					},
					{
						name: '混入',
						url: 'mixinpage'
					},
				]


			}
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			go(path) {
				this.$router.push({
					path,
					query: {}
				})
			}

		},
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}
</style>